<template>
    <div class="menu animate__animated" v-show="show">
        <div class="item" v-for="(item, key) in menu" :key="key">
            <router-link :to="{name: item.name}" >{{ item.title }}</router-link>
        </div>
    </div>
</template>

<script>
export default {
    name: "Dropdown",
    props: {
        menu: {
            type: Array
        }
    },
    data () {
        return {
            show: false
        }
    },
    methods: {
    },
    watch:{
        $route(to,from){
            this.show = false
        }
    },
}
</script>

<style scoped lang="scss">
main {
    .menu {
        display: flex;
        flex-direction: column;
        padding: 0;
        position: absolute;
        top: 65px;
        left: 0;
        z-index: 100;
        right: 0;
        border-radius: 4px;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .1);

        .item {
            display: flex;
            justify-content: center;
            min-width: 140px;
            background: #fff;
            border-bottom: 1px solid #f3f3f3;
            font-size: 13px;
            color: #333;
            cursor: pointer;
            transition: all .2s ease;
            flex-direction: column;
            height: auto;
            padding: 10px;

            a {
                color: #333;
                font-weight: 500;
            }

            a:hover {
                color: #363fe5;
            }
        }
    }

    .menu:before {
        width: 0;
        height: 0;
        content: '';
        border-style: solid;
        border-width: 0 6px 8px;
        border-color: transparent transparent #fff;
        position: absolute;
        left: 49%;
        top: -8px;
    }
}

</style>
